<template>
  <div class="text-center" v-if="uiData.list.length > 0 ? false : true">无数据</div>
  <el-row class="fs-7">
    <el-col :span="24">
      <el-row v-for="item in uiData.list" :key="item" class="p-1 bg-hover mb-2">
        <el-col :span="18"
          v-if="item.type === 1 && item.receiverId !== uiData.userId && item.status === 0 ? false : true">
          <el-row>
            <el-col :span="24">
              {{
    item.type === 0 ? '好友申请' : '系统通知'
  }}
            </el-col>
            <el-col v-if="item.type === 0" :span="24" class="mt-1">
              <div v-if="item.isMySend === false">
                <span>申请人：</span>
                <span class="text-primary">{{ item.senderName }}</span>
              </div>
              <div v-if="item.isMySend === true">
                <span>添加&nbsp;</span>
                <span class="text-primary">{{ item.receiverName }}</span>
                <span>&nbsp;为好友</span>
              </div>
            </el-col>
            <el-col v-if="item.type === 1" :span="24" class="mt-1">
              <span>内容：
                {{
    item.status === 1
      ? `删除好友-${item.senderName}` : `${item.senderName}删除了我`
  }}

              </span>
            </el-col>

          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row v-if="item.type === 0 && item.status === 0">
            <el-col :span="24" v-if="item.isMySend === false">
              <el-button type="primary" size="small" @click="uiMethods.agreeApply(item.senderId)">
                同意
              </el-button>
            </el-col>
            <el-col :span="24" v-if="item.isMySend === false">
              <el-button size="small" class="mt-1" @click="uiMethods.rejectApply(item.senderId)">
                拒绝
              </el-button>
            </el-col>
            <el-col :span="24" v-if="item.isMySend === true">
              等待处理
            </el-col>
          </el-row>
          <el-row v-if="item.type === 0">
            <el-col v-if="item.status === 1" :span="24" class="text-success">
              已同意
            </el-col>
            <el-col v-if="item.status === 2" :span="24" class="text-danger">
              已拒绝
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { useStore } from '../common/piniaStore';
import { onMounted, ref } from 'vue';
import moment from 'moment';

const store = useStore();

const uiData = ref({
  list: [] as Message[],
  userId: store.userId
});

onMounted(() => {
  uiData.value.list = [];
  uiMethods.getSystemMessage();
});

type Message = {
  senderId: string;
  senderName: string;
  receiverId: string;
  receiverName: string;
  type: number;
  status: number;
  create_time: string;
  isMySend?: boolean; // 扩展属性，用于标明该消息是否是我发送
}

const uiMethods = {
  async getSystemMessage() {
    const res = await axios.get('/getSystemMessage');
    let receivedMessages = res.data.data.receiveMessage.map(
      (msg: Message) => ({
        ...msg, isMySend: false
      })
    );
    let sentMessages = res.data.data.sendMessage.map(
      (msg: Message) => ({
        ...msg, isMySend: true
      })
    );
    let allMessages = [...receivedMessages as Message[], ...sentMessages as Message[]];
    allMessages.sort((a, b) => {
      return moment(a.create_time).valueOf() - moment(b.create_time).valueOf();
    });
    console.log('格式化后的参数：', allMessages);
    uiData.value.list = allMessages;
  },
  //同意申请
  agreeApply(senderId: string) {
    store.client!.agreeApply(senderId);

    uiMethods.getSystemMessage();
  },
  //拒绝申请
  rejectApply(senderId: string) {
    store.client!.rejectApply(senderId);

    uiMethods.getSystemMessage();
  }
};
</script>

<style lang="scss" scoped>
.bg-hover:hover {
  background-color: #e9ecf0;
}

.fs-7 {
  font-size: 0.9em;
}
</style>
